<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票</title>
    <style>
        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }
        .wrapper  > div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            margin-left: 50px;
            cursor: pointer;
        }
        h3 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>上半年-技术小组投票</h3>
    <div class="wrapper">
        <div class="item first">第一组 <span>(0)</span></div>
        <div class="item second">第二组 <span>(0)</span></div>
        <div class="item third">第三组  <span>(0)</span></div>
        <div class="item fourth">第四组 <span>(0)</span></div>
    </div>

    <script>
        // 需求：
            // 1、点击小组进行投票
            // 2、每个小组票数是独立的，随着点击次数增加票数(+1)

            var item_1 = document.querySelector(".first ");
            var span_1 = document.querySelector(".item  span ");
            var index_1 = 0 ; 
            item_1.onclick = function () {
                index_1 ++ ;
                // console.log(index_1);
                var str = "(" + index_1 +")" ;
                span_1.innerHTML = str ;
            }

            var item_2 = document.querySelector(".second ");
            var span_2 = document.querySelector(".second  span ");
            var index_2 = 0 ; 
            item_2.onclick = function () {
                index_2 ++ ;
                var str = "(" + index_2 +")" ;
                span_2.innerHTML = str ;
            }

            var item_3 = document.querySelector(".third ");
            var span_3 = document.querySelector(".third  span ");
            var index_3 = 0 ; 
            item_3.onclick = function () {
                index_3 ++ ;
                var str = "(" + index_3 +")" ;
                span_3.innerHTML = str ;
            }

            var item_4 = document.querySelector(".fourth ");
            var span_4 = document.querySelector(".fourth  span ");
            var index_4 = 0 ; 
            item_4.onclick = function () {
                index_4 ++ ;
                var str = "(" + index_4 +")" ;
                span_4.innerHTML = str ;
            }
            
    </script>
</body>
</html>